<style scoped>
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .weui-loadmore_line .weui-loadmore__tips {
    background-color: #eee;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
    width: 44%;
    display: inline-block;
    padding: 5px 3%;
    text-align: right;
  }
  .rj-cell span {
    font-size: 14px;
    color: #333;
    display: inline-block;
    width: 50%;
  }
  .rj-cell.note label{
    float: left;
  }
  .rj-cell.note span{
    width: 80%;
    display: inline-block;
  }
  .weui-cells {
    margin-top: 0;
  }
  .weui-cells_form {
    background: #fbfbfb;
  }
  .weui-cell {
    background: #fff;
  }
  .weui-cells__title {
    text-align: left;
  }
  .oitem {
    padding: 3px;
  }
  .hide {
    display: none;
  }
  #acts {
    font-size: 0;
  }
  #acts span {
    font-size: 14px;
  }
  .halfbtn {
    display: inline-block;
    width: 49%;
  }
  .weui-label {
    text-align: left;
  }

  .weui_uploader_input_wrp {
    float: left;
    position: relative;
    margin-right: 9px;
    margin-bottom: 9px;
    width: 77px;
    height: 77px;
    border: 1px solid #D9D9D9;
  }
  .weui_uploader_hd {
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;
  }
  .weui_uploader_files {
    list-style: none;
  }
  .weui_uploader_input_wrp:before {
    width: 2px;
    height: 39.5px;
  }
  .weui_uploader_input_wrp:before, .weui_uploader_input_wrp:after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #D9D9D9;
  }
  .weui_uploader_input {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .weui_uploader_input_wrp:after {
    width: 39.5px;
    height: 2px;
  }
  .weui_uploader_bd {
    overflow: hidden;
  }
  .weui_cell {
    padding: 10px 15px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background: #fff;
  }
  .examine >>> .weui-uploader_files {
    list-style: none;
    overflow-y: hidden;
  }
  .examine >>> .weui-uploader_file {
    float: left;
    margin-right: 9px;
    margin-bottom: 9px;
    width: 79px;
    background: no-repeat 50%;
    background-size: cover;
  }
  .weui-cell_select {
    padding: 0 15px;
  }
  .addcpguid {
    height: 100%;
    background: #eee;
  }
  .weui-grid {
    background: #fff;
  }
  .weui-panel__hd {
    text-align: left;
  }
</style>
<template>
  <div class="addcpguid">
    <div  style="height: 50px; line-height: 50px; background: #f7f7f7; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative">
      {{title}}
      <a href="javascript:;" @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="../../assets/back.png" style="width: 20px" />
      </a>
    </div>
    <div class="weui-grids">
      <a href="javascript:;" class="weui-grid js_grid" v-for="(item, index) in cates" :key="item.guid" @click="addData(item.code, item.name, item.type)">
        <div class="weui-grid__icon">
          <img src="../../../static/image/icon-cate.png" alt="">
        </div>
        <p class="weui-grid__label">
          {{item.name}}
        </p>
      </a>
    </div>
    <div class="weui-panel weui-panel_access" v-show="showChild">
      <div class="weui-panel__hd">子分类</div>
      <div class="weui-panel__bd">
        <a class="weui-cell weui-cell_access" href="javascript:;" v-for="(item, index) in childCates[code]" @click="toAddData(item.code, item.name, item.type)">
          <div class="weui-cell__hd"><img src="../../../static/image/icon-cate-item.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
          <div class="weui-cell__bd weui-cell_primary">
            <p>{{item.name}}</p>
          </div>
          <span class="weui-cell__ft"></span>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AddCostPriceGuide',
  data () {
    return {
      openid: localStorage.openid,
      title: '成本分类选择',
      cates: [],
      childCates: [],
      code: ''
    }
  },
  created() {
    //从首页进入刷新

  },
  computed: {
    'showChild': function () {
      return this.childCates[this.code] != undefined && this.childCates[this.code].length > 0 ? true : false
    }
  },
  mounted() {
    this.getItemCate();
  },
  methods: {
    getItemCate: function() {
      this.axios({
        method: 'get',
        responseType: 'json',
        url: '/produce/Costregister!getitemsType.action',
        params: {openid: this.openid}
      }).then(response => {
        if (response.data.status == "true") {
          this.cates = response.data.itemType.filter(this.getTopCate);
        } else if (response.data.status == 'false') {
          this.toastText(response.data.result);
        } else {
          this.toastError('系统错误');
        }
      });
    },
    getTopCate: function (item) {
      if (item.code.length == 6) {
        this.childCates[item.code.substring(0, 3)] != undefined ? this.childCates[item.code.substring(0, 3)].push(item) : this.childCates[item.code.substring(0, 3)] = [item];
      }
      return item.code.length == 3;
    },
    addData: function (code, name, type) {
      this.code = code;
      if (!this.showChild) this.toAddData(code, name, type);
    },
    // toAddData: function (code, name, type) {
    //   this.doAddData(code, name, type);
    // },
    toAddData: function (code, name, type) {
      let url = '';
      switch (code) {
        case '004001':
          url = 'AddFirstcostData2';
          break;
        case '005001':
          url = 'AddFirstcostData2';
          break;
        case '003':
          url = 'AddFirstcostData3';
          break;
        case '008':
          url = 'AddFirstcostData4';
          break;
        default:
          url = 'AddFirstcostData';
          break;
      }
      this.$router.push({name: url, query: {code: code, title: name, type: type}});
    }
  }
}
</script>
